<template>
  <div>
    <el-button-group class="grounp">
      <el-button size="mini">全渠道</el-button>
      <el-button size="mini">直达</el-button>
      <el-button size="mini">百度</el-button>
      <el-button size="mini">谷歌</el-button>
      <el-button size="mini">必应</el-button>
      <el-button size="mini">其他</el-button>
    </el-button-group>
    <div class="charts" ref="myDiv">111</div>
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  name: "xiaoshou",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv); // 得到图表实例
    myChart.setOption({
      tooltip: {
        trigger: "item",
        // formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        data: [
          "直达",
          "营销广告",
          "搜索引擎",
          "邮件营销",
          "联盟广告",
          "视频广告",
          "百度",
          "谷歌",
          "必应",
          "其他",
        ],
        type: "scroll",
        orient: "vertical",
        left: 10,
        top: 20,
        bottom: 20,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          selectedMode: "single",
          radius: [0, "20%"],
          label: {
            position: "inner",
            fontSize: 8,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1548, name: "搜索引擎" },
            { value: 775, name: "营销广告" },
            { value: 679, name: "直达", selected: true },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["45%", "60%"],
          labelLine: {
            length: 30,
          },
          label: {
            // formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
            // backgroundColor: "#F6F8FC",
            // borderColor: "#8C8D8E",
            // borderWidth: 1,
            // borderRadius: 4,
            rich: {
              a: {
                color: "#6E7079",
                lineHeight: 22,
                align: "center",
              },
              hr: {
                borderColor: "#8C8D8E",
                width: "100%",
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: "#4C5058",
                fontSize: 14,
                fontWeight: "bold",
                lineHeight: 33,
              },
              per: {
                color: "#fff",
                backgroundColor: "#4C5058",
                padding: [3, 4],
                borderRadius: 4,
              },
            },
          },
          data: [
            { value: 1048, name: "直达" },
            { value: 335, name: "营销广告" },
            { value: 310, name: "搜索引擎" },
            { value: 251, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 147, name: "视频广告" },
            { value: 135, name: "百度" },
            { value: 102, name: "谷歌" },
            { value: 102, name: "必应" },
            { value: 102, name: "其他" },
          ],
        },
      ],
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.charts {
  width: 799px;
  height: 300px;
}
</style>
